<template>
    <div class="mime-video-list-wrap padding-12">

      <div class="tab-wrap-fixed">
        <div class="tab-wrap">
          <van-tabs type="card" @click="onClick" class="tab-nav" color="#444444">
            <van-tab title="综合"></van-tab>
            <van-tab title="热门"></van-tab>
            <van-tab title="最新"></van-tab>
          </van-tabs>
        </div>
      </div>

      <div class="mime-video-list mime-list-wrap">
        <van-list
          v-model="isUploading"
          :finished="isUpfinished"
          :finished-text=" mimeVideoList.length === 0 ? '暂无数据' : '没有更多了' "
          @load="onLoad"
        >
          <van-row gutter="12">
            <van-col span="12" v-for="(item,index) in mimeVideoList" :key="index" class="index-list">
              <router-link :to="{path:baseUrl,query:{id:item.id}}">
                <div class="mime-video-list-container">
                  <div class="mime-video-list-img border-radius5">
                    <img :src="CDNimgUrl + item.image">
                    <template>
                      <span v-if="item.count <= 1">{{item.timer}}</span>
                      <span v-else>共{{item.count}}集</span>
                    </template>
                  </div>
                  <div class="mime-video-list-content">
                    <h4 class="mime-video-list-content-title">{{item.title}}</h4>
                    <van-row>
                      <van-col span='12' class="van-ellipsis">
                          <p>{{item.doctor}}</p>
                      </van-col>
                      <van-col span='12' class="text-align-r">
                          <p>
                            <label class="list-icon-see info-list-icon-see"></label>
                            {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人观看
                          </p>
                      </van-col>
                    </van-row> 
                  </div>
                </div>
              </router-link>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { List, Row, Col, Tab, Tabs, Collapse, CollapseItem, Cell, CellGroup, Icon } from 'vant'
    export default {
      name: "MimeVideoList",
      components: {
        [List.name]: List,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Collapse.name]: Collapse,
        [CollapseItem.name]: CollapseItem,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
      },
      mounted(){
        this.keyword = this.$route.query.keyword ? this.$route.query.keyword : ''
      },
      data(){
          return{
            baseUrl:'mime-video-detail',
            CDNimgUrl: this.GLOBAL.CDNimgUrl,
            page:0,
            tableIndex:0,
            sortArr:['sort','hits','id'],
            mimeVideoList:[],
            isUploading: false,
            isUpfinished: false,
            keyword:''
          }
      },
      methods:{
        getVideoListData(){
          this.page++;
          ajax.doAction({
            url:`/course?page=${this.page}&sort=${this.sortArr[this.tableIndex]}&keyword=${this.keyword}`,
            type: 'GET',
            successCallback:(data)=>{
              // console.log(data);
              let datas = data.data;
              this.isUploading = false;
              if(datas.length >0){
                this.mimeVideoList = this.mimeVideoList.concat(datas);
              }else{
                this.isUpfinished = true;
              }
            },
            errorCallback: (data)=> {
              console.log('请求失败');
            }
          });
        },
        onClick(index,title){
          // this.$toast(index,title);
          this.page = 0;
          this.tableIndex = index;
          this.isUploading = true;
          this.isUpfinished = false;
          this.mimeVideoList = [];
          this.getVideoListData();
        },
        onLoad(){
          // console.log('上拉加载'+this.page);
          this.getVideoListData();
        }
      }
    }
</script>

<style>

</style>
